<script lang="ts">
	import Header from './__com/Header.svelte';
	import Nav from './__com/Nav.svelte';
	import Banner from './__com/Banner.svelte';
	import Footer from './__com/Footer.svelte';
	import '../app.css';
	import LoginDialog from './__com/LoginDialog.svelte';
	import { useConfigstore, useUserstore } from '@/store';
	import FloatButtons from './__com/FloatButtons.svelte';
	import { initI18n } from '@/i18n';
	import { onMount } from 'svelte';
	import { get } from 'svelte/store';
	import { goto } from '$utils/intercept';
	import { debounce } from 'lodash-es';
	import { refreshUserState } from '@/store/modules/user';

	const i18n = initI18n();

	let loginDialogRef: LoginDialog | null = null;

	const openLoginDialog = () => loginDialogRef?.openDialog();
	const openHelpPage = () => goto('/help');

	const toLogin = async (params: CustomEvent) => {
		useUserstore().login(params.detail);
	};

	// const resizeAppPage = debounce(function ({ target }: Event) {
	// 	const w = target as Window;
	// 	document.body.style.zoom = (w.innerWidth / 1800).toFixed(2);
	// }, 1000);

	onMount(() => {
		const config = useConfigstore();
		i18n.change(get(config.lang) || 'en');
		refreshUserState();
		// window.addEventListener('resize', resizeAppPage);
	});
</script>

<div id="app" class="app overflow-auto">
	<Header on:login={openLoginDialog} on:openHelpPage={openHelpPage} />
	<Nav />
	<Banner />

	<main>
		<slot></slot>
		<!-- {#if Component}
			<svelte:component this={Component} />
		{/if} -->
	</main>

	<Footer />
	<LoginDialog bind:this={loginDialogRef} on:login={toLogin} />
	<FloatButtons />
</div>

<style>
	.app {
		display: flex;
		flex-direction: column;
		height: 100vh;
		min-height: 100vh;
	}

	main {
		flex: 1;
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		scroll-behavior: unset;
	}
</style>
